<template>
  <div>
    <div class="curr-page">
      <!-- 面包屑 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/buycar' }"
          >车辆列表</el-breadcrumb-item
        >
      </el-breadcrumb>

      <!-- 导航条 -->
      <div class="nav-choose mt-3 pb-3 fs-sm">
        <div class="nav-item-style d-flex ai-center">
          <div style="width:80px;text-align:left;">
            品牌
          </div>
          <span
            :class="[s_brand == '' ? 'text-red' : '']"
            @click="s_brand = ''"
            class="pr-3 "
            >不限</span
          >
          <span
            v-for="(b_item, b_index) in brands"
            :key="'brands' + b_index"
            @click="s_brand = b_item._id"
            :class="[s_brand == b_item._id ? 'text-red' : '']"
            class="mr-3"
          >
            {{ b_item.name }}
          </span>
        </div>

        <!-- 车型 -->
        <div class="nav-item-style d-flex ai-center">
          <div style="width:80px;text-align:left;">
            车型
          </div>
          <span
            :class="[s_carModel == '' ? 'text-red' : '']"
            @click="s_carModel = ''"
            class="pr-3 "
            >不限</span
          >
          <span
            v-for="(ca_item, ca_index) in carModel"
            :key="'carModel' + ca_index"
            @click="s_carModel = ca_item._id"
            :class="[s_carModel == ca_item._id ? 'text-red' : '']"
            class="mr-3"
          >
            {{ ca_item.name }}
          </span>
        </div>

        <!-- 颜色 -->
        <div class="nav-item-style d-flex ai-center">
          <div style="width:80px;text-align:left;">
            颜色
          </div>
          <span
            :class="[s_color == '' ? 'text-red' : '']"
            @click="s_color = ''"
            class="pr-3 "
            >不限</span
          >
          <span
            v-for="(co_item, co_index) in color"
            :key="'brands' + co_index"
            @click="s_color = co_item._id"
            :class="[s_color == co_item._id ? 'text-red' : '']"
            class="mr-3"
          >
            {{ co_item.name }}
          </span>
        </div>

        <!-- 燃油类型 -->
        <div class="nav-item-style d-flex ai-center">
          <div style="width:80px;text-align:left">
            燃油类型
          </div>
          <span
            :class="[s_fuelType == '' ? 'text-red' : '']"
            @click="s_fuelType = ''"
            class="pr-3 "
            >不限</span
          >
          <span
            v-for="(f_item, f_index) in fuelType"
            :key="'brands' + f_index"
            @click="s_fuelType = f_item._id"
            :class="[s_fuelType == f_item._id ? 'text-red' : '']"
            class="mr-3"
          >
            {{ f_item.name }}
          </span>
        </div>
      </div>

      <!-- 分页信息 -->
      <div class="d-flex jc-end ai-center">
        <el-pagination
          layout="total, prev, pager, next"
          @current-change="handleCurrentChange"
          :currentPage="pageInfo.currentPage"
          :page-size="pageInfo.pageSize"
          :total="pageInfo.total"
        >
        </el-pagination>
      </div>

      <!-- 列表 -->
      <div class="my-3" v-if="car_list.length != 0">
        <el-space wrap>
          <div
            style="width: 240px;padding:0;margin-right:20px;margin-top:1.25rem"
            v-for="(item, index) in car_list"
            :key="index"
          >
            <div>
              <img
                :src="item.icon"
                alt=""
                style="width:240px"
                @click="seeCarDetail(item._id)"
              />
              <div>
                <!-- 车名 -->
                <!-- 超过一行省略号显示 -->
                <div
                  class="fs-md"
                  style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;"
                >
                  {{ item.name }}
                </div>

                <div class="fs-xs">
                  <span>车龄{{ item.age }}年</span>
                  <span> | </span>
                  <span>{{ item.milage }}万里行程</span>
                </div>
                <div class="mt-1 text-red1 d-flex jc-between ai-center">
                  <span>成交价 {{ item.price }}万</span>
                  <router-link
                    :to="'/detail/shop/' + item.shopId"
                    v-slot="{ navigate }"
                    v-show="item.shopId"
                    custom
                  >
                    <el-button @click="navigate" class="text-black" size="mini"
                      >进店逛逛</el-button
                    >
                  </router-link>
                </div>
              </div>
            </div>
          </div>
        </el-space>
      </div>

      <el-empty description="暂无符合条件车辆" v-else></el-empty>
    </div>
    <the-footer></the-footer>
  </div>
</template>

<script>
import TheFooter from "@/views/layout/TheFooter.vue";
export default {
  components: {
    TheFooter,
  },

  data() {
    return {
      // car_list
      car_list: [],

      // 分页信息
      pageInfo: {
        currentPage: 1,
        pageSize: 8,
        total: 0,
      },

      // 下拉列表内容
      brands: [],
      color: [],
      fuelType: [],
      carModel: [],

      s_brand: "",
      s_color: "",
      s_fuelType: "",
      s_carModel: "",
    };
  },

  watch: {
    s_brand() {
      this.handleCurrentChange(1);
    },
    s_color() {
      this.handleCurrentChange(1);
    },
    s_fuelType() {
      this.handleCurrentChange(1);
    },
    s_carModel() {
      this.handleCurrentChange(1);
    },
  },

  methods: {
    fetchInitData() {
      this.fetchBrands();
      this.fetchCarModel();
      this.fetchColor();
      this.fetchFuelType();
      this.handleCurrentChange();
    },

    seeCarDetail(car_id) {
      this.$router.push(`/detail/car/${car_id}`);
    },

    // flash page data
    async handleCurrentChange(val) {
      const res = await this.$http.get("/car", {
        params: {
          currentPage: val ? val : 1,
          pageSize: this.pageInfo.pageSize,
          orderByTime: !this.order ? -1 : 1,
          brand: this.s_brand,
          carModel: this.s_carModel,
          color: this.s_color,
          fuelType: this.s_fuelType,
        },
      });
      this.car_list = [];
      this.car_list = res.data.car_list;
      this.pageInfo.total = res.data.total;
    },

    async fetchBrands() {
      const res = await this.$http.get(`category/brand`);
      this.brands = res.data;
    },

    async fetchCarModel() {
      const res = await this.$http.get(`category/carModel`);
      this.carModel = res.data;
    },

    async fetchColor() {
      const res = await this.$http.get(`category/color`);
      this.color = res.data;
    },

    async fetchFuelType() {
      const res = await this.$http.get(`category/fuelType`);
      this.fuelType = res.data;
    },
  },

  created() {
    this.fetchInitData();
  },
};
</script>

<style lang="scss" scoped>
.curr-page {
  width: 1080px;
  margin: 0 auto;
  padding-top: 30px;
}

.nav-item-style {
  // border: 1px solid #999;
  height: 2.5rem;
}
</style>
